<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 边框属性</title>
    <style type="text/css">
        #radius,#shadow{
            height: 50px;
            width: 200px;
            margin-bottom: 10px;
        }
        #radius{
            background-color: #b4b4b4;
            border-radius:0.5em;
        }
        #shadow{
            background-color: #b4b4b4;
            box-shadow:10px 10px rgba(0,0,0,0.5);
        }
        #border-image-1,#border-image-2{
            width: 81px;
            height: 81px;
            margin-bottom: 10px;
        }
        #border-image-1{
            border: 14px red;
            border-image-source: url("../source/img/border-image.png");
            border-image-slice: 27 27 27 27;
            border-image-repeat: stretch;
        }
        #border-image-2{
            border: 27px;
            border-image-source: url("../source/img/border-image.png");
            border-image-slice: 27 27 27 27;
            border-image-repeat: stretch;
        }
        #border-image-3,#border-image-4{
            width: 200px;
            height: 60px;
            margin-bottom: 10px;
            border: 20px;
        }
        #border-image-3{
            border-image-source: url("../source/img/background-image.jpg");
            border-image-slice: 20 20 20 20 fill;
            border-image-repeat: stretch;
        }
        #border-image-4{
            border-image-source: url("../source/img/background-image.jpg");
            border-image-slice: 20 20 20 20 ;
            border-image-repeat: stretch;
        }
    </style>
</head>
<body>
<div id="radius"></div>
<div id="shadow"></div>
<div id="border-image-1"></div>
<div id="border-image-2"></div>
<div id="border-image-3">有fill值</div>
<div id="border-image-4">无fill值</div>
</body>
</html>